<template>
    <div>
        <div>
            <!--
      <video :src="videoSrc" :poster="videoImg" :autoplay="playStatus" height="421" width="700" :muted="muteStatus">
        your browser does not support the video tag
      </video>
      <button @click="playClick" :class="{hide: isPlay}">点击播放</button> -->
            <!--class="video-js vjs-default-skin vjs-big-play-centered" -->
            <video  :src="videoSrc" width="100%" height="100%" autoplay="autoplay" controls="controls">
                
            </video>
        </div>
        
            <div v-for="item in list" :key="item.id">
                <img :src="item.videoImg" alt="" />
                <p>{{ item.videoName }}</p>
            </div>
        
    </div>
</template>

<script>
export default {
    name: "Video",
    data() {
        return {
            videoSrc: '',
            videoImg: "",
            playStatus: "",
            muteStatus: "",
            isMute: true,
            isPlay: false,
            width: "100%", // 设置视频播放器的显示宽度（以像素为单位）
            height: "100%", // 设置视频播放器的显示高度（以像素为单位）
            preload: "none", //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            autoplay: "muted",
            list: [],
        };
    },
    created() {
        this.GetApi();
        this.GetApiList();
    },
    mounted() {
        // console.log(this.$route.params.id);
        this.GetApi();
        this.GetApiList();
    },
    methods: {
        async GetApi() {
            const data = await this.$API.OutbackApi.OutbackVideoApi(
                this.$route.params
            );
            // console.log(data);
            this.videoSrc=data.videoUrl
            this.videoImg = data.videoImg;
        },
        async GetApiList() {
            console.log(this.$route.params);
            const data = await this.$API.OutbackApi.OutbacListApi(this.$route.params);
            console.log(data);
            this.list = data;
        },
    },
    beforeRouteLeave (to, from, next) {
        const boo =confirm('听你想听!!!!!!')
        if (boo) {
            next()
        }
    }
};
</script>

<style scoped >
.aaaa {
    display: flex;
}
</style>

